import React from 'react';
export default class UMEditor extends React.Component {
    constructor(...props) {
        super(...props);
        this.state = {
            ready: false
        };
    }

    componentDidMount() {
        this.editor = UM.getEditor('umeditor');
        this.editor.addListener('contentchange', ()=>this.onContentChanged());
        this.editor.addListener('ready', ()=> {
            this.setState({ready: true});
            this.editor.setContent(this.props.content);
        });
    }

    componentWillReceiveProps(props) {
        if (props.content && this.state.ready) {
            // this.editor.setContent(props.content);
        }
    }

    onContentChanged() {
        this.props.onContentChange(this.editor.getContent());
    }

    componentWillUnmount() {
        this.editor.removeListener('contentchange', ()=>this.onContentChanged());
        this.editor.destroy();
    }

    render() {
        return (
            <div className="component-umeditor">
                <script type="text/plain" id="umeditor" style={{width:'100%',height:400}}></script>
            </div>
        )
    }
}

UMEditor.propTypes = {
    content: React.PropTypes.string.isRequired,
    onContentChange: React.PropTypes.func.isRequired
};